<template>
  <div class="user-bgd">
    <!-- 我的知心购头部组件 -->
    <z-header>我的知心购</z-header>
    <section class="user-page">
      <div class="user-info">
        <div class="info">
          <img src="@/assets/user.png" alt="" />
          <div class="user-admin">
            <p>admin</p>
            <span>用户名：admin</span>
            <p>13312345678</p>
          </div>
          <a href="" class="account-management">
            <i></i>
            <span>账号管理</span>
          </a>
        </div>
      </div>
      <div class="user-menu">
        <div class="menu-item">
          <i class="iconfont icon-daifukuan1"></i>
          <span>待付款</span>
        </div>
        <div class="menu-item">
          <i class="iconfont icon-daishouhuo1"></i>
          <span>待收货</span>
        </div>
        <div class="menu-item">
          <i class="iconfont icon-money"></i>
          <span>已完成</span>
        </div>
        <div class="menu-item">
          <i class="iconfont icon-icon1"></i>
          <span>全部订单</span>
        </div>
      </div>
      <div class="user-fork">
        <div class="fork-item">
          <i>20</i>
          <span>关注的商品</span>
        </div>
        <div class="fork-item">
          <i>5</i>
          <span>关注的店铺</span>
        </div>
        <div class="fork-item">
          <i>10</i>
          <span>我的足迹</span>
        </div>
      </div>
      <p class="recommend-title">为你推荐</p>
      <recommend></recommend>
    </section>

    <tab-bar></tab-bar>
  </div>
</template>

<script>
import TabBar from "@/components/tabBar.vue";
import ZHeader from "@/components/common/z-header.vue";
import Recommend from '../../components/recommend.vue';
// import { getRecommendData } from '@/api/api';
export default {
  components: {
    TabBar,
    ZHeader,
    Recommend,
  },
  created() {
    // getRecommendData((res) => {
    //   // console.log(res);
    // })
  },
};
</script>

<style lang="scss" scoped>
.user-bgd {
  background: #f7f7f7;
}
.user-page {
  position: relative;
  top: 63px;
  background: #f7f7f7;

  .user-info {
    width: 94%;
    margin: 22px 3%;
    background: linear-gradient(90deg, #eb3c3c, #ff7459);
    border-radius: 10px;

    .info {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      padding: 36px 21px;
      box-sizing: border-box;

      img {
        width: 86px;
        height: 86px;
      }

      .user-admin {
        display: flex;
        flex-direction: column;
        margin-left: 14px;
        font-size: 20px;
        color: #fff;
        line-height: 30px;

        span {
          color: hsla(0, 0%, 100%, 0.7);
          font-size: 18px;
        }
      }

      .account-management {
        position: absolute;
        top: 14px;
        right: 28px;
        font-size: 20px;
        color: rgba(76, 0, 0, 0.7);
      }
    }
  }

  .user-menu {
    display: flex;
    justify-content: space-around;
    width: 100%;
    background: #fff;

    .menu-item {
      flex: 1;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      margin: 18px 0;
      text-align: center;

      span {
        padding-top: 7px;
        font-size: 17px;
      }

      .iconfont {
        font-size: 50px;
        color: #dd9e58;
        box-sizing: border-box;
      }

      .icon-money,
      .icon-icon1 {
        margin-top: 10px;
        font-size: 35px;
      }
    }
  }

  .user-fork {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    margin: 21px 0;
    height: 108px;
    background: #fff;

    .fork-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      text-align: center;

      i {
        font-style: normal;
        font-weight: 700;
        padding: 7px 0;
        font-size: 20px;
      }
    }
  }

  .recommend-title {
    width: 100%;
    height: 65px;
    line-height: 65px;
    padding-left: 10px;
    background: #fff;
    box-sizing: border-box;
  }

  
}
</style>